/* eslint-disable */
<template>
  <div class="content-wrap">
    <div class="content-head" style="margin-bottom: 20px;">
      <div class="sort-keys">

        <div class="tab-list">
          <div class="item" @click="keys.status = item.key" :class="{actived: keys.status === item.key}"
            v-for="(item, index) in statusList">
            {{item.text}}
          </div>
        </div>

       <a-input-search placeholder="模糊搜索" enter-button  style="width: 180px;margin-right:10px;" v-model="keys.key" allowClear 
         @input="refresh" @search="refresh" />
      </div>
      <div style="margin-top: 4px;">
          <a-button type="primary" style="margin-right:10px;"  @click="isExport = !isExport">导出Excel</a-button>
      </div>
    </div>

    <div class="sort-keys">
      <div class="tab-list" style="margin-bottom:10px;" v-if="keys.status != 'all'">
        <div class="item" @click="huostatus = item.key" :class="{actived: huostatus === item.key}"
          v-for="(item, index) in statusList2">
          {{item.text}}
        </div>
      </div>
    </div>

    <a-table class="table" :rowKey="row => row.uuid" :dataSource="list" :pagination="pagination" :rowClassName="setRowClassName" @change="pageChange">
      <a-table-column title="序号" width="20px">
        <template slot-scope="text, record, index">
          <div>{{ index+1 }}</div>
        </template>
      </a-table-column>

      <a-table-column title="主图" width="60px">
        <template slot-scope="row">
          <div class="product-info">
            <div class="thumb" :style="`background-image:url(${row.thumb}?x-oss-process=image/resize,w_400)`">
            </div>
          </div>
        </template>
      </a-table-column>

      <a-table-column title="商品" width="320px">
        <template slot-scope="row">
          <div class="product-info">
            <div class="info-meta">
              <div class="title">
                <span>{{ row.title }}</span>
                <a href="javascript:;" style="margin-left: 10px;" @click="handleEdit(row)">编辑</a>
              </div>
              <div class="price-c">
                <PriceDisplay :info="row"></PriceDisplay>
              </div>
              <div class="remark" v-if="row.remark">
                {{ row.remark }}
              </div>
            </div>
          </div>
        </template>
      </a-table-column>
      <a-table-column title="入库汇总" width="120px">
        <template slot-scope="row">
          <span><a href="javascript:;" @click="handleEditBuys(row,2)">{{ row.ruku_sum || 0 }}&nbsp;件</a></span>
        </template>
      </a-table-column>
      <a-table-column title="取消汇总" width="120px">
        <template slot-scope="row">
          <span><a href="javascript:;" @click="handleEditBuys(row,3)">{{ row.cancel_sum || 0 }}&nbsp;件</a></span>
        </template>
      </a-table-column>
      <a-table-column title="库存" width="120px">
        <template slot-scope="row">
          <span>{{ row.stock || 0 }}&nbsp;件</span>
        </template>
      </a-table-column>
      <a-table-column title="未分配库存" width="120px">
        <template slot-scope="row">
          <span>{{ row.kfp || 0 }}&nbsp;件</span>
        </template>
      </a-table-column>
      <a-table-column title="采购中" width="120px">
        <template slot-scope="row">
          <span><a href="javascript:;" @click="handleEditBuys(row,1)">{{ row.buys || 0 }}&nbsp;件</a></span>
        </template>
      </a-table-column>
      <a-table-column title="状态" width="100px">
        <template slot-scope="row">
          <div v-if="row.status == 1"><a-tag color="blue"">满足</a-tag></div>
          <div v-else><a-tag color="red">不满足</a-tag></div>
        </template>
      </a-table-column>
      <a-table-column title="需求" width="120px">
        <template slot-scope="row">
          <span><a href="javascript:;" @click="handleEditMax(row)">{{ row.xq_num || 0 }}&nbsp;件</a></span>
        </template>
      </a-table-column>
      <a-table-column title="需求日" width="120px">
        <template slot-scope="row">
          <span>{{ row.max_day }}</span>
        </template>
      </a-table-column>
      <a-table-column title="操作" width="120px" v-if="action_show">
        <template slot-scope="row">
          <a href="javascript:;" @click="handleChange(row)">修改库存</a>
        </template>
      </a-table-column>





    </a-table>


    <a-modal title="权重详情" style="top: 100px;" :visible="isEditMaxLog" width="500px"
       @cancel="isEditMaxLog = false" :footer="null">
       <Maxlog v-if="isEditMaxLog" :participant="participant" @cancel="isEditMaxLog = false" @success="fetchData"></Maxlog>
    </a-modal>
    <Buyslog :info="participant" v-if="isEditBuysLog" @refresh="fetchData" @close="isEditBuysLog = false"></Buyslog>
    <ExportPopup @hide="isExport=false" :isShow="isExport"></ExportPopup>
  </div>
</template>
<script>
  import ISwitch from '@/components/ISwitch/ISwitch'
  import Maxlog from "./components/Maxlog.vue"
  import Buyslog from "./components/Buyslog.vue"
  import ExportPopup from "./components/ExportXq"
  import moment from 'moment'
  export default {
    name: 'Products',
    components: {
      ISwitch,
      Maxlog,
      Buyslog,
      ExportPopup,
    },
    data() {
      return {
        action_show : false,
        isEditMaxLog: false,
        isEditBuysLog: false,
        participant: '',
        statusList: [
          {
            text: '需求',
            key: 'default'
          },
          {
            text: '全部',
            key: 'all'
          },
        ],
        huostatus: 'all',
        statusList2: [
          {
            text: '全部',
            key: 'all'
          },
          {
            text: '满足',
            key: '1'
          },
          {
            text: '不满足',
            key: '0'
          },
        ],
        loading: false,
        list: [],
        actived: 'default',
        page: 1,
        per_page: 20,
        total: 0,
        keys: {
          key: '',
          status: 'default',
        },
        editUuid: '',
        editId: '',
        isExport: false,
        pagination: {
          pageSize: 20,
          current: 1,
          total: 0
        },
      }
    },
    computed: {
      
    },
    watch: {
      keys: {
        handler(value) {
          this.pagination.current = 1
          this.fetchData()
        },
        deep: true
      }
    },
    filters: {
      priceToFixed(value) {
        return value ? (value / 100).toFixed(2) : '0.00'
      },
      formatDate(value) {
        return value ? moment(value).format('YYYY-MM-DD hh:mm') : ''
      }
    },
    created() {
      this.action_show = this.$authCheck('storage_list')
      this.page = parseInt(localStorage.getItem("product_list_page") || 1)
      localStorage.setItem("product_list_page", 1)
      this.fetchData()
    },
    methods: {
      pageChange(pagination) {
        this.pagination = pagination
        this.fetchData() 
      },
      setRowClassName (row) {
        if(this.keys.status != 'all' && this.huostatus != 'all' && row.status != this.huostatus){
          return "notoday";
        }
      },
      handleChange (row) {
        this.$iForm.show({
          title: '修改库存',
          frame: [
            {
              type: 'radio',
              key: 'type',
              default: 'in',
              options: [
                {
                  title: '增加',
                  value: 'in'
                },
                {
                  title: '减少',
                  value: 'out'
                }
              ],
              title: '变动类型',
              required: true
            },
            {
              type: 'number',
              key: 'stock',
              title: '变动数量',
              required: true
            },
            {
              type: 'textarea',
              key: 'description',
              title: '变动原因',
              tips: '变动原因会显示在流水记录中',
              required: true
            },
          ],
          success: (data) => {
            this.$http({
              url: `/storage_xq/${row.uuid}/stock`,
              method: 'PATCH',
              data: {
                type: 'add',
                ...data
              }
            }).then(res => {
              this.$message.success('操作成功');
              this.$iForm.hide()
              this.fetchData()
            })
          }
        })
      },
      handleEditMax(row) {
        this.participant = row.max_day_list
        this.isEditMaxLog = true
      },
      handleEditBuys(row,status){
        row.buys_status = status
        this.participant = row
        this.isEditBuysLog = true
      },
      handleEdit (row) {
        this.$iForm.show({
          title: '修改',
          frame: [
            {
              key: 'title',
              title: '商品',
              default: row.title,
              disabled: true,
            },
            {
              type: 'textarea',
              key: 'remark',
              title: '备注',
              default: row.remark
            },
          ],
          success: (data) => {
            this.$http({
              url: `/storage_xq/${row.uuid}`,
              method: 'PATCH',
              data: {
                type: 'update',
                attributes: data
              }
            }).then(res => {
              this.$message.success('更新成功');
              this.$iForm.hide()
              this.fetchData()
            })
          }
        })
      },
      refresh() {
        this.pagination.current = 1
        this.fetchData()
      },
      onSearch(value) {
        console.log(value)
      },
      fetchData() {
        if(this.keys.status != 'all'){
          this.pagination.pageSize = 100
        }else{
          this.pagination.pageSize = 10
        }

        this.$http.get('storage_xq', {
          params: {
            ...this.keys,
            page: this.pagination.current,
            per_page: this.pagination.pageSize,
          }
        }).then(res => {
          this.list = res.data.list
          this.pagination.total = res.data.item_total
        })
      }
    }
  }
</script>
<style>
.notoday {
  display: none;
}
</style>
<style lang="scss" scoped>

  .marked-tag {
    border-radius: 50px;
    border: 1px solid #666;
    font-size: 10px;
    padding: 1px 6px;
    color: #666;
    cursor: pointer;

    &.actived {
      background: #666;
      color: white;
    }
  }

  .sort-keys {
    display: flex;
    align-items: center;

    .tab-list {
      display: flex;
      margin-top: 6px;
      border-bottom: 1px solid #e1e1e1;
      margin-right: 50px;

      .item {
        margin-right: 30px;
        padding: 0px 10px 4px 10px;
        cursor: pointer;
        font-weight: 500;

        &.actived {
          color: #1890FF;
          border-bottom: 3px solid #1890FF;
        }

        &:hover {
          color: #1890FF;
        }
      }
    }

  }

  .content-wrap {
    background-color: #fff;

    .content-head {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .table {
      .product-info {
        .thumb {
          width: 60px;
          height: 60px;
          background-position: center;
          background-repeat: no-repeat;
          background-size: 100%;
          margin-right: 0px;
          border-radius: 4px;
          position: relative;
          overflow: hidden;

          .tag-image {
           width: 36px;
           height: 36px;
           position: absolute;
           top: 0px;

           &.location-1 {
             right: 0px;
             top: 0px;
           }

           &.location-2 {
             left: 0px;
             top: 0px;
           }
          }
        }

        .title {
          font-weight: 500;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.65);
          margin-bottom: 4px;
        }
        .remark {
          color: rgba(0, 0, 0, 0.45);
          font-size: 13px;
          line-height: 22px;
          width: 200px;
          border: 1px solid red;

          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }

        .price-c {
          // color: #FA253B;
          // color: red;
          font-weight: 500;
        }
      }
    }
  }
</style>
